<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String ctx = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ ctx + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>main</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
		<script type="text/javascript" src="<%=ctx%>/scripts/jquery.min.js"></script>
		<!--<link rel="stylesheet" type="text/css" href="styles.css">-->

<style type="text/css">
#customers {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	width: 100%;
	border-collapse: collapse;
}

#customers td,#customers th {
	font-size: 1em;
	border: 1px solid #98bf21;
	padding: 3px 7px 2px 7px;
}

#customers th {
	font-size: 1.1em;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 4px;
	background-color: #A7C942;
	color: #ffffff;
}

#customers tr.alt td {
	color: #000000;
	background-color: #EAF2D3;
}
</style>
	</head>
	<script>
		$(function () {
			$("ul.pagination li.disabled a").click(function () {
				return false;
			});
		});
	</script>
	<body>
		<div style="text-align: right;">
			通讯录
			<a href="register.jsp">注册</a> 管理员
			<a href="<%=ctx%>/login/toLogin">登陆</a>
		</div>
		<h3>
			通讯录列表
		</h3>
		<table id="customers">
			<thead>
				<tr>
					<th witdh="10%">
						姓名
					</th>
					<th witdh="10%">
						性别
					</th>
					<th witdh="15%">
						学号
					</th>
					<th witdh="15%">
						班级
					</th>
					<th witdh="20%">
						手机号码
					</th>
					<th witdh="20%">
						电子邮件
					</th>
					<th witdh="10%">
						QQ号码
					</th>
				</tr>
			</thead>
			<tbody>
			<c:set var="i" value="0"></c:set>
				<c:forEach var="contact" items="${contactList}">
					<tr <c:if test="i%2==1"> class="alt" </c:if>>
						<td>
							${contact.name}
						</td>
						<td>
							<c:if test="${contact.sex.equalsIgnoreCase('m')}">
								男
							</c:if>
							<c:if test="${contact.sex.equalsIgnoreCase('f')}">
								女
							</c:if>
						</td>
						<td>
							${contact.stuid}
						</td>
						<td>
							${contact.classInfo.name}
						</td>
						<td>
							${contact.mobile}
						</td>
						<td>
							${contact.email}
						</td>
						<td>
							${contact.qq}
						</td>
						<c:set var="i" value="${i+1}"></c:set>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<nav class="pager">
			<ul class="pagination">
				<li><a href="<%=ctx%>/contact/list?start=0"><span>首页</span></a></li>
				<li<c:if test="${!page.hasPre}"> class="disabled"</c:if>><a href="<%=ctx%>/contact/list?start=${page.start-page.pageSize}"><span>上一页</span></a></li>
				<li<c:if test="${!page.hasNext}"> class="disabled"</c:if>><a href="<%=ctx%>/contact/list?start=${page.start+page.pageSize}"><span>下一页</span></a></li>
				<li><a href="<%=ctx%>/contact/list?start=${page.last}"><span>尾页</span></a></li>
			</ul>
		</nav>
	</body>
</html>
